<template>
	<div
		class="flex justify-center items-center p-1 app-font-bold cursor-pointer"
		:class="{ 'opacity-50': isDisabled }"
		@click="!isDisabled && feedStore.showDescription(data.orderNo)">
		<base-icon class="icon" name="jia"></base-icon>
		<div class="ml-1">{{ $t('feed.descriptionAdd') }}</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base/'
import { useFeedStore } from '@/store'
import { PropType, computed } from 'vue'
import { FeedType } from '@/types'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType>,
		required: true
	}
})

const feedStore = useFeedStore()

const isDisabled = computed(() => props.data.outcome)
</script>
